<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
  .base 
  {
       width:500px; 
       position:absolute;
       top:50%;
       left:30%;
       height:2px;              
  }
   .placeHolder
   {
       width:500px; 
       top:20%;
       left:30%;
       height:2px;       
   }
   .barStyle
   {
   	    background-color:#CCC; 
   	    width:50px; 
   	    position:absolute;
		border-right:2px solid #888;
		border-bottom:2px solid #888;
   }   
   
   </style> 
     <script src="http://code.jquery.com/jquery-latest.js"></script>
	      <script src="color.js"></script>
  
  <script>
  $(document).ready(function(){
        $("#go").click(function() 
        {      
              drawGraph();
        });
  });
  
  
  function drawGraph() 
{   
    $("#baseDiv").children(".barStyle").remove();
        marginLeft = 0;    
	
		var rightBar = document.createElement("div");    
        rightBar.id = 'rightBar';   
        rightBar.className = 'barStyle';         
        rightBar.style.bottom = '4px'; 
        rightBar.style.left = '125px';
        
        var leftBar = document.createElement("div");    
        leftBar.id = 'leftBar';   
        leftBar.className = 'barStyle bars';         
        leftBar.style.bottom = '4px'; 
        leftBar.style.left = '25px';

        $("#baseDiv").append(leftBar);     
		$("#baseDiv").append(rightBar);     
		
		//Make em both grow to minimum height
        $(".bars").animate(
        {   
            height: "40px"
        }, 300);   
		
		//Now two things happen at once.
		
		//We have the loser turn red, while...
        $("#leftBar").animate(
        {   
			backgroundColor: "red",
        }, 700);   
		
		//...while the winner stretches taller and turns green
		$("#rightBar").animate(
        {    
			backgroundColor: "lightgreen",            
			height: "120px"
        }, 600);
}
  </script>
</head>
<body>
  <button id="go">Run</button>
  <div class="container">
  <div id="placeHolderDiv" class="placeHolder" >  </div>
  <div id="baseDiv" class="base">  
  </div>                
  </div>
</body>
</html>